  [data-color-mode*='dark'] body{
    --color-canvas-default : #0f172a;
    --color-fg-default: #c9d1d9;
    --color-neutral-muted: rgb(51 65 85/0.3);  
  }
  [data-color-mode*='light'] body{
    --color-canvas-default : #f1f5f9;
    --color-fg-default: #24292f;
    --color-neutral-muted: rgba(175, 184, 193, 0.2);  /* a是透明度 */
  }
  body{
    transition: background-color 0.3s;
    background-color: var(--color-canvas-default)
  }
  [data-color-mode*='dark'] body .dark {display: none;}
  [data-color-mode*='dark'] body .light {display: block;}
  [data-color-mode*='light'] body .dark {display: block;}
  [data-color-mode*='light'] body .light {display: none;}
  
  
.header-nav button {
  background-color: transparent;  /* 背景透明 */
  color: var(--color-fg-default);
  cursor: pointer;
  font-size: 24px;
  transition: all 0.3s;
  border: none;
  border-radius: 9999px;
  padding: 5px;
  margin-right: 0.3rem
}

.header-nav button:hover {
  background-color: var(--color-neutral-muted);
}
  
  
  *{
    margin:0;
    padding:0;
    box-sizing: border-box;
  }
  body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .wrap{
    width: 320px;
    height: 568px;
    background: url(../img/marsbg.png)
  }
  .journey{
     width: 320px;
     height: 80px;
     margin:190px auto 0;
     display: flex;    
     align-items: center;
     justify-content: space-between;
  }
  .star{
     width: 80px;
     height: 80px;
     display: flex;
     align-items: center;
  }
  .star img{
    width: 120%;
    height: 120%;
  }

.line{
   display: flex;
   flex: 1 1 auto;
   height: 4px;
   transform: translateY(-5px);
}  

.path{
  height: 4px;
  border-radius: 2px;
  box-shadow: 0px 0px 30px 4px #9cdbff;
  animation: fly 10s infinite;
}

@keyframes fly{
   0%{
     width: 0px
   }
   100%{
     width: 126px;
   }
}

.shop{
    transform: translateY(-13px);
}
  
  